import AutoComplete from 'antd/es/auto-complete';
import Divider from 'antd/es/divider';
import { AppStore } from '../../../../store';
import { useMemo, useState } from 'react';
import Slider from 'antd/es/slider';

export function ModelDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
    }>) => JSX.Element[]
}) {
    const { appState: { app, jsonData } } = AppStore.useContainer();


    const [explodeId, setExplodeId] = useState<string | undefined>();

    const topModels = useMemo(() => {
        return (jsonData?.paramModel || []);
    }, [jsonData]);

    const explode = (percentage: number) => {
            app?.modelService.explode({
                mainId: explodeId,
                scale: percentage,
            })
    }

    return <>
        <Divider>模型爆炸</Divider>
        <AutoComplete value={explodeId} onChange={(data) => setExplodeId(data)} style={{ width: '100%' }} placeholder='输入或者选择爆炸对象' options={topModels.map(m => ({ value: m.id }))} />
        <Slider
            key="explision-action-slider"
            className='explode-main-slider'
            min={0}
            max={200}
            step={1}
            onChange={explode}
        />
    </>
}